<template>
  <section>
    <!-- 面包屑 -->
     <breadcrumbs></breadcrumbs>
    <!-- 查询条件 -->
    <el-form ref="searchForm" :model="searchForm" label-width="100px" inline class="demo-form-inline" size='small' style="border-bottom: 1px solid #f6f6f6;">
      <el-form-item label="发送类型" prop="createType">
        <el-select v-model="searchForm.createType" placeholder="请选择发送终端">
          <el-option label="消息" value="1"></el-option>
          <el-option label="公告" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="接收类型" prop="recType">
        <el-select v-model="searchForm.recType" placeholder="请选择发送终端">
          <el-option label="全部" value="0"></el-option>
          <el-option label="钉钉用户" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="消息标题" prop="info">
        <el-input v-model="searchForm.info" placeholder="请输入消息标题"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
    <btns @exec="exec"></btns>
    <div>
      <p class="flex-center">总记录条数&nbsp;&nbsp;共计<span>{{searchForm.totalCount}}条</span></p>
    </div>
    <div class="data-container scroll-table">
      <!-- 按钮列表 -->
      <el-table :data="tableData" border style="width: 100%" @selection-change="tableSelectionChange">
        <el-table-column type="selection" width="80"> </el-table-column>
        <el-table-column prop="createType" label="发送类型">
          <template slot-scope="scope">
            <div v-if="scope.row.createType==1">消息</div>
            <div v-if="scope.row.createType==2">公告</div>
          </template>
        </el-table-column>
        <el-table-column prop="recType" label="接收类型">
          <template slot-scope="scope">
            <div v-if="scope.row.recType==0">全部</div>
            <div v-if="scope.row.recType==1">钉钉用户</div>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="消息标题">
        </el-table-column>
        <el-table-column prop="userCount" label="发送人数">
        </el-table-column>
        <el-table-column prop="nickName" label="发送人">
        </el-table-column>
        <el-table-column prop="createTime" label="发送时间">
        </el-table-column>
        <el-table-column label="操作" width="135px">
          <template slot-scope="scope">
            <el-button @click="gototogetHouseMent(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="mgt-10 pd-0" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.current"
                     :page-sizes="[10, 20, 30, 50]" :page-size="searchForm.size" layout="total, sizes, prev, pager, next, jumper"
                     :total="searchForm.totalCount">
      </el-pagination>
    </div>
    <!--新增修改界面-->
    <el-dialog title="新增消息" :visible.sync="AddFormVisible">
      <el-form :model="addForm" ref="addForm" :rules="rules">
        <el-form-item label="消息标题" :label-width="formLabelWidth" prop="title">
          <el-input v-model="addForm.title" autocomplete="off"></el-input>
        </el-form-item>
        <!--  @change="getUser" -->
        <el-form-item label="发送类型" :label-width="formLabelWidth" prop="msgType">
          <el-radio-group v-model="addForm.msgType">
            <el-radio :label="1">消息</el-radio>
            <el-radio :label="2">公告</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- @change="getUser" -->
        <el-form-item label="接收类型" :label-width="formLabelWidth" prop="recType">
          <el-radio-group v-model="addForm.recType">
            <el-radio :label="0">全部</el-radio>
            <el-radio :label="1">钉钉用户</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选择用户" :label-width="formLabelWidth" prop="">
          <el-row>
            <el-col :span="24" class="user-box-item">
              <el-input v-model="searchName" autocomplete="off"></el-input>
              <el-button class="check-user-box" @click="checkUserBykey">查询</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-table :data="userData" border style="width: 100%" @selection-change="tableSelectionChangeUser">
                <el-table-column type="selection" v-if="currType!=0" width="55">
                </el-table-column>
                <el-table-column v-if="currType==1" prop="nickname" label="姓名">
                </el-table-column>
                <el-table-column v-if="currType==3" prop="houseName" label="仓库名称">
                </el-table-column>
                <el-table-column v-if="currType==4" prop="opName" label="运营名称">
                </el-table-column>
                <el-table-column v-if="currType==2" prop="stopName" label="回收站点名称">
                </el-table-column>
                <el-table-column v-if="currType==1" prop="phoneNum" label="电话号码">
                </el-table-column>
                <el-table-column v-if="currType==2" prop="contactPhone" label="电话号码">
                </el-table-column>
                <el-table-column v-if="currType==3" prop="contactsPhone" label="电话号码">
                </el-table-column>
                <el-table-column v-if="currType==4" prop="contactsPhone" label="电话号码">
                </el-table-column>

              </el-table>
              <el-pagination class="mgt-10 pd-0" @size-change="handleSizeChangeUser" @current-change="handleCurrentUser" :current-page="userForm.current"
                             :page-sizes="[10, 20, 30, 50]" :page-size="userForm.size" layout="total, sizes, prev, pager, next, jumper"
                             :total="userForm.totalCount">
              </el-pagination>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="消息内容" :label-width="formLabelWidth" prop="info">
          <edit ref="child" v-model="addForm.info"></edit>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clearAdd">取 消</el-button>
        <el-button type="primary" @click="sendMessage('addForm')">确 定</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import btns from '@/components/btns.vue'
import breadcrumbs from "@/components/breadcrumbs.vue";
import {
  format
} from "../../utils/tool"
import Edit from '../../components/edit.vue'
export default {
  components: {
    btns,
    Edit,
    breadcrumbs,
  },
  data() {
    return {
      addForm: {},
      searchForm: {
        info: '',
        recType: '',
        createType: '',
      },

      userData: [],
      searchName: "",
      houseArr: [],
      adduserIds: [],
      formLabelWidth: "120px",
      AddFormVisible: false,

      currType: 1,
      yearData: "",
      // topData: {},
      btnForm: {},
      userForm: {
        current: 1,
        size: 10,
        totalCount: 0,

      },

      addORUpdateVisible: false,
      funTit: '',
      cityForm: {
        cityName: "",
        cityId: ''
      },
      rules: {
        "title": [{
          required: true,
          message: '请输入消息标题',
          trigger: 'blur'
        }],
        "msgType": [{
          required: true,
          message: '请选择发送类型',
          trigger: 'change'
        }],
        "recType": [{
          required: true,
          message: '请选择用户要接收类型',
          trigger: 'blur'
        }],
      },
      tableData: [],
      tableSelection: []
    }
  },
  created() {
    // this.getOperateNum();
    this.getTableData(1, 10);
  },
  methods: {

    tableSelectionChangeUser(row) {
      console.log(row, 'row')
      this.adduserIds = [];
      row.forEach(item => {
        console.log(item)
        if (item.wxUserId != undefined) {
          this.adduserIds.push(item.wxUserId)
        } else if (item.houseId != undefined) {
          this.adduserIds.push(item.houseId)
        } else if (item.opId != undefined) {
          this.adduserIds.push(item.opId)
        } else if (item.backStopId != undefined) {
          this.adduserIds.push(item.backStopId)
        }
      })
    },
    checkUserBykey() {
      if (this.currType == 1) {
        this.$api.user.getAdminUserList({
          current: this.userForm.current,
          size: this.userForm.size,
          keyword: this.searchName

        }).then(res => {
          if (res.code == 200) {
            this.userData = res.data;
            this.userForm.totalCount = res.totalCount;
            this.currType = 1;
            this.searchName = '';
          } else {
            this.$message.error(res.msg)
            this.searchName = '';
          }
        })
      } else if (this.currType == 2) {
        this.$api.recycleBin.getAdminBackStopList({
          current: this.userForm.current,
          size: this.userForm.size,
          keyword: this.searchName
        }).then(res => {
          if (res.code == 200) {
            this.userData = res.data;
            this.userForm.totalCount = res.totalCount;
            this.currType = 2;
            this.searchName = '';
          } else {
            this.$message.error(res.msg)
            this.searchName = '';
          }
        })

      } else if (this.currType == 3) {
        this.$api.warehouse.getAdminHouseList({
          current: this.userForm.current,
          size: this.userForm.size,
          houseName: this.searchName
        }).then(res => {
          if (res.code == 200) {
            this.userData = res.data;
            this.userForm.totalCount = res.totalCount;
            this.currType = 3;
            this.searchName = '';
          } else {
            this.$message.error(res.msg)
            this.searchName = '';
          }
        })
      } else if (this.currType == 4) {
        this.$api.operate.getAdminOpList({
          current: this.userForm.current,
          size: this.userForm.size,
          opName: this.searchName
        }).then(res => {
          if (res.code == 200) {
            this.userData = res.data;
            this.userForm.totalCount = res.totalCount;
            this.currType = 4;
            this.searchName = '';
          } else {
            this.$message.error(res.msg)
            this.searchName = '';
          }
        })

      } else if (this.currType == 0) {
        this.$message.error("所有用户无法提供模糊搜索");
        this.searchName = '';
      }
    },
    handleSizeChangeUser(row) {

    },
    handleCurrentUser(row) {

    },
    getUser(index) {
      if (index == 1) {
        this.$api.user.getAdminUserList({
          current: this.userForm.current,
          size: this.userForm.size,

        }).then(res => {
          if (res.code == 200) {
            this.userData = res.data;
            this.userForm.totalCount = res.totalCount;
            this.currType = 1;
          } else {
            this.$message.error(res.msg)
          }
        })
      } else if (index == 2) {
        this.$api.recycleBin.getAdminBackStopList({
          current: this.userForm.current,
          size: this.userForm.size,
        }).then(res => {
          if (res.code == 200) {
            this.userData = res.data;
            this.userForm.totalCount = res.totalCount;
            this.currType = 2;
          }
        })

      } else if (index == 3) {
        this.$api.warehouse.getAdminHouseList({
          current: this.userForm.current,
          size: this.userForm.size,
        }).then(res => {
          if (res.code == 200) {
            this.userData = res.data;
            this.userForm.totalCount = res.totalCount;
            this.currType = 3;
          }
        })
      } else if (index == 4) {
        this.$api.operate.getAdminOpList({
          current: this.userForm.current,
          size: this.userForm.size,
        }).then(res => {
          if (res.code == 200) {
            this.userData = res.data;
            this.userForm.totalCount = res.totalCount;
            this.currType = 4;
          }
        })

      } else if (index == 0) {
        this.userData = [];
        this.userForm.totalCount = 0;
        this.currType = 0
      }
    },
    gototogetHouseMent(row) {
      console.log(row)
      this.$router.push({
        path: "/message/mesageDetails",
        query: {
          messageId: row.messageId
        }
      })
    },
    getHouseArr() {
      this.$api.operate.getNotCityHouseList({
        cityId: 1,
      }).then(res => {
        if (res.code == 200) {
          this.houseArr = res.data;
        }
      })
    },
    getHouse() {
      console.log(this.addForm.houseIds)
    },
    // getOperateNum () {
    //   this.$api.shopList.getAdminShopCount().then(res => {
    //     if (res.code == 200) {
    //       this.topData = res.data;
    //     }
    //   })
    // },
    clearAdd() {
      this.$refs.child.clearText();
      this.adduserIds = [];
      this.currType = 0;
      this.AddFormVisible = false;
      this.addForm = {};
    },
    sendMessage(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$api.user.sendMessage({
            content: this.addForm.info,
            msgType: this.addForm.msgType,
            recIds: this.adduserIds.length >= 0 ? this.adduserIds.join(",") : '',
            recType: this.addForm.recType,
            title: this.addForm.title
          }).then(res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "发送消息成功"
              })
              this.clearAdd()
              this.getTableData(this.searchForm.current, this.searchForm.size, this.searchForm.info, this.searchForm.sid, this.searchForm.gid);
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    addhouse() {
      this.AddFormVisible = true
    },
    handleSizeChange(v) {
      console.log(v)
      this.searchForm.size = v;
      this.getTableData(this.searchForm.current, v, this.searchForm.info);
    },
    handleCurrentChange(v) {
      this.searchForm.current = v;
      this.getTableData(v, this.searchForm.size, this.searchForm.info);
    },
    getTableData(curr, size, info, sid, gid) {
      this.$api.message.getSendMessageList({
        current: curr,
        size: size,
        createType: sid,
        recType: gid,
        title: info
      }).then(res => {
        if (res.code == 200) {
          this.tableData = res.data;
          console.log(this.tableData)
          this.searchForm.totalCount = res.totalCount;
          this.searchForm.size = res.pageSize
        }
      })
    },

    handleReset() {
      this.$refs.searchForm.resetFields();
      this.getTableData(this.searchForm.current, this.searchForm.size)
    },
    search() {
      this.getTableData(this.searchForm.current, this.searchForm.size, this.searchForm.info, this.searchForm.createType, this.searchForm.recType);
    },
    btnlist() {
      //获取接口
      this.$api.city.getList({}).then(d => {
        if (d.code == 200) {
          this.tableData = d.data;
        } else {
          this.$message.error(d.msg);
        }
      }).catch((e) => {
        console.log(e);
      })
    },
    tableSelectionChange(val) {
      this.tableSelection = val;
    },
    exec(fun) {
      if (this[fun]) {
        this.funTit = fun;
        this[fun]()
      } else {
        this.$message.error('方法未定义');
      }
    },
    add() {
      this.AddFormVisible = true;
    },
    update() {
      if (this.tableSelection.length != 1) {
        this.$message.error('请选中一行数据');
        return
      }
      this.addForm = this.tableSelection[0];
      this.AddFormVisible = true;
      console.log(this.funTit, '234234')
    },
    del() {
      if (this.tableSelection.length < 1) {
        this.$message.error('请选中一行数据');
        return
      }
      this.$confirm("确认要删除这条消息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let ids = this.tableSelection.map(e => {
            return e.messageId
          })
          this.$api.message
            .batchDelSend({
              messageIds: ids.join(','),
            })
            .then((d) => {
              if (d.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
                this.refresh();
              } else {
                this.$message.error(d.msg);
              }
            });
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },
    refresh() {
      this.getTableData(this.searchForm.current, this.searchForm.size)
    },
    enable() {
      if (this.tableSelection.length != 1) {
        this.$message.error('请选中一行数据');
        return
      }
      var demo = this.tableSelection[0];
      if (demo.state == 1) {
        this.$message.error('该数据已启用');
        return
      }
      this.$confirm('此操作将启用该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.shopList.updateStatus({
          shopId: demo.shopId,
          status: 1
        }).then(d => {
          if (d.code == 200) {
            this.getTableData(this.searchForm.current, this.searchForm.size, this.searchForm.cid, this.searchForm.info);
            this.$message.success('启用成功');
          } else {
            this.$message.error(d.msg);
          }
        }).catch((e) => {
          console.log(e);
        })
      });
    },
    disable() {
      if (this.tableSelection.length != 1) {
        this.$message.error('请选中一行数据');
        return
      }
      var demo = this.tableSelection[0];
      if (demo.state == 2) {
        this.$message.error('该数据已禁用');
        return
      }
      this.$confirm('此操作将禁用该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.shopList.updateStatus({
          shopId: demo.shopId,
          status: 2
        }).then(d => {
          if (d.code == 200) {
            this.getTableData(this.searchForm.current, this.searchForm.size, this.searchForm.cid, this.searchForm.info);
            this.$message.success('禁用成功');
          } else {
            this.$message.error(d.msg);
          }
        }).catch((e) => {
          console.log(e);
        })
      });
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.tableData.findIndex(c => c.btnCode == this.btnForm.btnCode) >= 0) {
            this.$message.error('code不能重复');
            return
          }
          if (this.funTit == 'add') {
            this.$api.system.btnadd(this.btnForm).then(d => {
              if (d.code == 200) {
                this.addORUpdateVisible = false;
                this.$refs.btnForm.resetFields();
                this.btnlist();
              } else {
                this.$message.error(d.msg);
              }
            }).catch((e) => {
              console.log(e);
            })
          } else {
            this.$api.system.btnupdate(this.btnForm).then(d => {
              if (d.code == 200) {
                this.addORUpdateVisible = false;
                this.$refs.btnForm.resetFields();
                this.btnlist();
              } else {
                this.$message.error(d.msg);
              }
            }).catch((e) => {
              console.log(e);
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>

<style lang="less" scoped>
.check-user-box {
  margin-left: 20px;
  margin-bottom: 20px;
}
.dialog-footer {
  margin-top: 50px;
}
.user-box-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fontText {
  font-size: 20px;
}

.fontTop {
  font-size: 40px;
}

.top-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.top-item {
  border: 1px gray solid;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%;
  padding: 20px;

  .top-icon {
    width: 50%;
    height: 150px;
    border: 1px red solid;
  }

  .right-item-box {
    text-align: center;
    margin-left: 20px;
  }
}
</style>
